Intro

Nord Carousel

The Nord Carousel is an accessible and native-built carousel with no external dependencies!

Main Features:
- Keyboard navigation
- Autoplay/slideshow
- Auto-stop slideshow on mouse hover

Demo

Landscapes

Important Note:
For now, the carousel component does not have a set height.

Please assign a height that fits your slide content!

Components

  • carousel

    ATTRIBUTES

    REQUIRED:

    - slide-count
    Type: Number
    Set the number of slides in the carousel.


    OPTIONAL:

    - autoplay
    Type: Boolean | Default: False
    Set this to true to enable slideshow/autoplay.

    - autoplay-timer-ms
    Type: Number | Default: 2500
    Slideshow timer in milliseconds.

    - nav-btn-position
    Type: Number (Percentage) | Default: 50%
    Controls the position of the prev/next buttons.

    - hide-nav-buttons
    Type: Boolean | Default: False
    Set this to true to hide prev/next buttons.
    Setting this to true automatically enables autoplay.

    pagination-margin
    Default: 1rem
    Controls the top margin for the pagination dots.

    - hide-pagination
    Type: Boolean | Default: False
    Set to true to hide pagination dots.

    SLOTS

    left-btn and right-btn
    Use these to set custom prev/next buttons.

    default
    Use this slot for the 'slide' component.

  • slide

    ATTRIBUTES

    REQUIRED:

    - index
    Type: Number
    Set the index of the slide.